<template>
  <div class="exhibits-box" id="tem1-exhibits-box">
    <div class="title">
      <titles title="展品图库" />
    </div>
    <div>
      <seach @seachInfo="seachInfo" />
      <div id="template1Exhibits" class="exhibits-content" v-if="total > 0">
        <t-row :gutter="20">
          <t-col
            :xs="4"
            :sm="4"
            :md="4"
            :lg="3"
            :xl="3"
            v-for="(item, index) in list"
            :key="item.id"
            @mouseenter="imgEnter(index, list)"
            @mouseleave="imgLeave(index, list)"
          >
            <div class="exhibits-item" @click="pathInfo(item.id, item.moduleId)">
              <div style="overflow: hidden; width: 280px; height: 210px">
                <img
                  :style="{ background: store.styleInfo.auxiliaryColor }"
                  class="exhibits-item-img t-image--fit-contain t-image--position-center"
                  :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/2/w/280/h/210/format/webp')"
                  alt=""
                />
                <div class="shadow"></div>
              </div>
              <div class="item-title">
                <span :class="'titleText' + item.id"> {{ item.name }}</span>
                <div class="line" :class="'line' + item.id"></div>
              </div>
            </div>
          </t-col>
        </t-row>
      </div>
      <div v-else style="display: flex; justify-content: center; align-items: center; height: 300px">暂无相关数据</div>
      <t-row v-if="total > 12">
        <t-col
          :span="12"
          :class="{
            't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
            't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
            't-pagination2': store.styleInfo.themeColor == '#B9463F',
            't-pagination3': store.styleInfo.themeColor == '#343029',
            't-pagination4': store.styleInfo.themeColor == '#171719',
          }"
        >
          <t-pagination
            v-model="parmas.pageNo"
            v-model:pageSize="parmas.pageSize"
            :total="total"
            :showPageSize="false"
            show-jumper
            @change="onChange"
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </t-col>
      </t-row>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'exhibits',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { exhibitionData } from '@/api/templates/templates';
import titles from '@/components/title/title.vue';
import seach from './seach.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { imgEnter, imgLeave } from '@/pages/templatePage/components/Subunit/component/hover';
const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const total = ref(0);
const list = ref([]);
const parmas = reactive({
  value: '',
  typeId: 0,
  ageId: 0,
  levelId: 0,
  ModuleId: 1,
  CompanyId: -1,
  pageNo: 1,
  pageSize: 12,
});

// if (sessionStorage.getItem('pageNo')) {
//   parmas.pageNo = Number(sessionStorage.getItem('pageNo'));
// }
const init = async () => {
  try {
    let { data } = await exhibitionData(localStorage.getItem('projectId'), parmas);
    total.value = data.total;
    list.value = data.data;
  } catch {}
};
const onPageSizeChange = (size) => {
  init();
  // sessionStorage.setItem('pageNo', pageInfo.pageNo);
};

const onCurrentChange = (index, pageInfo) => {
  init();
  // sessionStorage.setItem('pageNo', parmas.pageNo);
};
const pathInfo = (e: number, moduleId: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: moduleId },
  });
};
const seachInfo = (e: any) => {
  parmas.value = e.value;
  parmas.typeId = e.typeId;
  parmas.ageId = e.ageId[e.ageId.length - 1];
  parmas.levelId = e.levelId;
  parmas.ModuleId = e.ModuleId;
  parmas.CompanyId = e.CompanyId;
  parmas.pageNo = 1;
  init();
};
const onChange = (pageInfo) => {
  //console.log(pageInfo);

  var exhibitsDom = document.getElementById('template1Exhibits');
  exhibitsDom.scrollIntoView();

  // sessionStorage.setItem('pageNo', parmas.pageNo);
};

init();
</script>

<style lang="less" scoped>
.title-box {
  font-size: 17px;
  // font-family: SourceHanSerif;
  font-weight: 500;
  color: #333333;
  line-height: 32px;
  margin-top: 50px;
}
.exhibits-box {
  padding: 50px 0px;
  width: 1180px;
  margin: 0 auto;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.t-row {
  margin: 0;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 280px;
  .exhibits-item-img {
    width: 280px;
    height: 210px;
    transition: all 0.5s;
  }
}
.item-title {
  width: 100%;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  cursor: pointer;
  span {
    font-size: 18px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    // font-weight: 500;
    color: #333333;
    line-height: 28px;
  }
}
.exhibits-content {
  margin-top: 50px;
  padding-bottom: 80px;
}
.shadow {
  width: 280px;
  height: 210px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  cursor: pointer;
  // border-radius: 50%;
}
.exhibits-item:hover .shadow {
  background: rgba(0, 0, 0, 0.4);
}
.exhibits-item:hover img {
  transform: scale(1.1);
}
.line {
  width: 0px;
  height: 1px;
  background: #000;
  transform: all 0.5s;
  margin: auto;
  max-width: 240px;
}
.t-pagination0 {
  :deep(.t-is-current) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
    color: #fff !important;
  }
}
.t-pagination1 {
  :deep(.t-is-current) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:active) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
    color: #fff !important;
  }
}
.t-pagination2 {
  :deep(.t-is-current) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:active) {
    background: #b9463f !important;
    border-color: #b9463f !important;
    color: #fff !important;
  }
}
.t-pagination3 {
  :deep(.t-is-current) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #343029 !important;
    border-color: #343029 !important;
    color: #fff !important;
  }
}
.t-pagination4 {
  :deep(.t-is-current) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #171719 !important;
    border-color: #171719 !important;
    color: #fff !important;
  }
}
/deep/.t-pagination__number:hover {
  border-color: var(--td-component-border);
  color: #333;
}
/deep/.t-is-current:hover {
  color: var(--td-text-color-anti);
}
/deep/.t-input:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input.t-is-error {
  border-color: var(--td-component-border);
}
/deep/.t-input--focused {
  box-shadow: 0 0 0 0 !important;
}

</style>
